<template>
<div class="navbar" v-show="show">
  <ul class="nav nav-pills">
    <li v-for="tab in tabs" :class="{active: $index===active}" @click.prevent="onSwitch($index)">
      <a v-link="{ path: tab.url }">{{tab.name}}</a>
    </li>
  </ul>       
</div>
</template>

<script>
export default {
  props: {
    tabs: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      active: 0
    }
  },
  methods: {
    onSwitch (index) {
      this.active = index
    }
  },
  computed: {
    show () {
      return this.tabs.length >= 2
    }
  }
}
</script>

<style scoped>
.navbar {
  text-align: center;
}
.navbar > ul {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flex;
}
.navbar li + li {
  margin-left: 10px;
}
</style>